/*
 * @Author       : 魏威 <1209562577@qq.com>
 * @Date         : 2022-06-30 11:16 周4
 * @Description  : echart demo01
 */

import { useSize } from 'ahooks'
import * as echarts from 'echarts'
import React, { useEffect, useRef } from 'react'
import './index.less'

export default function Demo01() {
  // 基于准备好的dom，初始化echarts实例
  let myChart: echarts.ECharts | undefined
  const chartRef = useRef<HTMLDivElement>(null)
  const boxRef = useRef<HTMLDivElement>(null)
  const size = useSize(boxRef)

  useEffect(() => {
    const dom = chartRef.current
    if (dom) {
      myChart = echarts.getInstanceByDom(dom)
      if (!myChart) {
        myChart = echarts.init(dom)
      }
      myChart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      })
      myChart.resize()
    }
  }, [size])

  return (
    <div ref={boxRef} className={'demo01-box'}>
      <div ref={chartRef} style={{ height: '100%', width: '100%' }}>
        box1
      </div>
    </div>
  )
}
